<template>
  <div class="allwi">
    <div class="top">
      <div class="box">
        <i class="el-icon-document"></i>
        <div class="right">
          <div>{{tabledata.order}}</div>
          <div>今日付款订单数</div>
        </div>
      </div>
      <div class="box">
        <i class="el-icon-s-order"></i>
        <div class="right">
          <div>${{tabledata.money}}</div>
          <div>今日付款金额</div>
        </div>
      </div>
      <div class="box">
        <i class="el-icon-money"></i>
        <div class="right">
          <div class="change" @click="gotocash">去提现</div>
          <div>￥{{tabledata.gotocash}}</div>
          <div>可提现金额</div>
        </div>
      </div>
    </div>
   <div class="echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
    <cust-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :formData="form"
      :tabledata="tabledata"
    />
  </div>
</template>

<script>
import CustDialog from "./children/CustDialog";
export default {
  data() {
    return {
      dialogTitle: "体现",
      form: {},
      dialogFormVisible: false,
      tabledata: {
        order: 7,
        money: 347,
        gotocash: 809,
      },
    };
  },
  methods: {
    gotocash() {
      this.dialogFormVisible = true;
      this.dialogTitle = "提现";
      this.form = {};
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableDatas();
      }
    },
    myEcharts(){
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
			  title: {
				  text: '交易统计'
			  },
			  tooltip: {},
			  legend: {
				  data:['金额']
			  },
			  xAxis: {
				  data: ['07.21','07.22','07.23','07.24','07.25','07.26']
			  },
			  yAxis: {},
			  series: [{
				  name: '付款金额',
				  type: 'bar',
				  data: [150, 220, 136, 310, 210, 347]
			  }]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  }
  },
  mounted() {
     this.myEcharts();
  },

  components: {
    CustDialog,
  },
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  .box {
    width: 30%;
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    justify-content: space-around;
    position: relative;
    padding: 10px 0px;
    box-shadow: 10px 10px 8px #a1a1a1;
    i {
      font-size: 40px;
    }
    .right {
      margin-right: 40px;
      :first-child {
        text-align: center;
      }
      .change {
        position: absolute;
        top: 5px;
        right: 35px;
        font-size: 14px;
        color: blue;
      }
      .change:hover {
        cursor: pointer;
      }
    }
  }
}
.echarts{
  width: 100%;
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>